<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/common/includes.jsp" %>

<!DOCTYPE html>
<html lang="${currentLocale}">
<head>
	<title>zzzzzz - </title>
	<%@ include file="/WEB-INF/common/meta.jsp" %>
	<%@ include file="/WEB-INF/common/global_res.jsp" %>
</head>
<body>
<%@ include file="/WEB-INF/common/header.jsp" %>
<div class="container">
	<div class="row">
		<div class="span2 sidebar">
			<ul class="nav nav-list" data-spy="affix">
				<li><a tabindex="-1" href="${ctx}/tag/美容">生活的智慧</a></li>
				<li><a tabindex="-1" href="${ctx}/tag/健身">健康</a></li>
				<li><a tabindex="-1" href="${ctx}/tag/美食">努力吧</a></li>
				<li><a tabindex="-1" href="${ctx}/tag/美食">觅食</a></li>
				<li><a tabindex="-1" href="${ctx}/tag/美食">留住我容颜</a></li>

				<li class="nav-header">在这里</li>
				<li><a tabindex="-1" href="#">厨</a></li>
				<li><a tabindex="-1" href="#">书</a></li>
				<li><a tabindex="-1" href="#">厅</a></li>
				<li><a tabindex="-1" href="#">园</a></li>
				<li><a tabindex="-1" href="#">卧</a></li>
				
				<li class="nav-header">这时候</li>
				<li><a tabindex="-1" href="#">晨</a></li>
				<li><a tabindex="-1" href="#">午</a></li>
				<li><a tabindex="-1" href="#">夜</a></li>
				
				<li class="nav-header">天气</li>
				<li><a tabindex="-1" href="#">晴</a></li>
				<li><a tabindex="-1" href="#">雨</a></li>
				<li><a tabindex="-1" href="#">阴</a></li>
			</ul>
		</div>
		<div class="span7" style="width: 600px;">
			<div class="home-topic-list row-fluid">
				<div class="span12">
	               	<h3 style="text-align:center;">
		               	${topicView.title}
	               	</h3>
		            <div style="margin-bottom: 20px;"><a href="/topic/${topicView.id}"><img src="/img/${topicView.picId}" alt="${topicView.title},${topicView.tags}" /></a></div>
	               	<div class="row-fluid">
		               	<div class="span12">
		                	<p>${topicView.textS}</p>
		               	</div>
	               	</div>
	               	${topicView.updDt}
		            ${topicView.looks} / ${topicView.likes} / ${topicView.replies}
               	</div>
            </div>
			<div class="row-fluid">
				<div class="topic-viewpoint well well-small span12">
					<a href="/u/${topicView.website}"><img src="/img/u/s/${topicView.userId}.jpg" class="thumb thumb_32 img-rounded" style="margin-right:10px;" />${topicView.username}</a> 
					<i class="icon-time" style="margin-left: 10px;"></i> ${topicView.updDt}
					
					<button type="button" class="btn" id="likesBtn">
						${topicView.likes}
						<i class="icon-heart"></i> 我有同感
					</button>
				</div>
			</div>
			<div id="replySpan" class="row-fluid">
				<div class="span12">
					<shiro:user>
						<form id="replyForm">
						    <fieldset>
						        <legend>
						            	评论  <span class="pull-right" id="replyCount"><i class="icon-comment"></i>${replyViewListCount}</span>
						        </legend>
						        <textarea name="text" style="width: 600px;height: 60px;" placeholder="请文明发言"></textarea>
						        <button type="submit" class="btn" id="replySubmitBtn" style="text-align: center;">
						            	提交
						        </button>
						        <span id="replyMsg"></span>
						    </fieldset>
						</form>
					</shiro:user>
					<shiro:guest>
						<div class="alert">
						  	<a href="/logon?back=${backUrl}"><span class="btn btn-small btn-primary">请登录后再评论</span></a>
						</div>
					</shiro:guest>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span12" id="replies">
					<c:forEach var="replyView" items="${replyViewList}" varStatus="status">
						<div class="comment-item">
						    <div class="pic">
						        <a href="/u/${replyView.website}">
									<img src="/img/u/s/${replyView.userId}.jpg" class="thumb thumb_50 img-rounded" />
								</a>
						    </div>
						    <div class="content report-comment">
						        <div class="author">
						          ${replyView.addDt}
						          <a href="/u/${replyView.website}">${replyView.username}</a>
						        </div>
						        <p>${replyView.text}</p>
						    </div>
						</div>
					</c:forEach>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span12">
					<section id="replyViewListPageBar">
						${replyViewListPageBar}	
					</section>
				</div>
			</div>
			<div class="span3">
				
			</div>
		</div>
	</div>
</div>
<%@ include file="/WEB-INF/common/footer.jsp" %>

</body>
<script type="text/javascript">
	$(function() {
		$("#replySubmitBtn").click(function(){
			var replyText = $('#replyForm :input[name="text"]').val();
			if(replyText == null || replyText == ''){
				$('#replyMsg').html('<i class="icon-warning-sign"></i>&nbsp;请填写评论内容');
        		$('#replyMsg').attr('class', 'alert');
        		return false;
			}
			
			$('#replySubmitBtn').attr('disabled','disabled');
			var form = $('#replyForm').serialize();
			var url = '/content/reply/${topicView.id}';
			$.ajax({
				type: "POST",
		        url: url,
		        data: form,
		        success: function(data){
		        	console.log(data);
		        	if(data.type == 'SUCCESS'){
		        		var replyMsg = jQuery.parseJSON(data.json);
		        		var userLink = '/u/${currentUser.id}';
		        		
		        		var html = '<div class="comment-item">';
		        		html += '<div class="pic">';
		        		html += '<a href="'+userLink+'">';
		        		html += '<img src="/img/u/s/${currentUser.id}.jpg" class="thumb thumb_50 img-rounded" />';
		        		html += '</a>';
		        		html += '</div>';
		        		html += '<div class="content report-comment">';
		        		html += '<div class="author">';
		        		html += replyMsg.addDt;
		        		html += '<a href="'+userLink+'">${currentUser.username}</a>';
		        		html += '</div>';
		        		html += '<p>'+replyMsg.text+'</p>';
		        		html += '</div>';
		        		html += '</div>';
		        		
		        		$('#replies').append(html);
		        		$('#replyCount').text(replyMsg.count);
		        	}
		        	$('#replySubmitBtn').removeAttr('disabled');
	        		$('#replyForm :input[name="text"]').val('');
		        	$('#replyMsg').html(data.text);
	        		$('#replyMsg').attr('class', data.cssClass);
		        },
		        error: function(){
		        	alert("err");
		        }
		    });
		});
	});
</script>
</html>